<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Quick Start</title>
  <script src="/js/spritejs.js"></script>
  <style>
    html,body {
      margin: 0;
      padding: 0;
      background: #201e1e;
      height: 100%;
      width: 100%;
      max-width: 800px;
    }

    #stage {
      display: inline-block;
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background: #201e1e;
    }  
  </style>
</head>
<body>
  <div id="stage"></div>
  <script>
  (async function () {
    const {Scene, Sprite} = spritejs;
    const container = document.getElementById('stage');
    const scene = new Scene({
      container,
      width: 1200,
      height: 1200,
    });

    await scene.preload([
      'https://p3.ssl.qhimg.com/t010ded517024020e10.png',
      'https://s1.ssl.qhres.com/static/6ead70a354da7aa4.json',
    ]);

    const layer = scene.layer('fglayer');
    layer.canvas.style.backgroundColor = '#FFFDCC';

    const ground = new Sprite();
    ground.attr({
      anchor: [0.5, 0],
      size: [700, 30],
      pos: [600, 830],
      bgcolor: '#c93',
      borderRadius: 15,
    });
    layer.append(ground);

    const head = new Sprite('head.png');
    head.attr({
      pos: [606, 0],
    });

    const neck = new Sprite('neck.png');
    neck.attr({
      pos: [626, 68],
      zIndex: -1,
    });

    const body = new Sprite('body.png');
    body.attr({
      pos: [606, 73],
    });

    const leftArm = new Sprite('arm-1.png');
    leftArm.attr({
      pos: [600, 73],
    });

    const rightArm = new Sprite('arm-2.png');
    rightArm.attr({
      pos: [675, 73],
    });

    layer.append(head, neck, body, leftArm, rightArm);

    body.animate([
      {y: 773},
    ], {
      duration: 1000,
      easing: 'ease-in',
      fill: 'forwards',
    });

    leftArm.animate([
      {y: 773},
    ], {
      delay: 300,
      duration: 1000,
      easing: 'ease-in',
      fill: 'forwards',
    });

    rightArm.animate([
      {y: 773},
    ], {
      delay: 600,
      duration: 1000,
      easing: 'ease-in',
      fill: 'forwards',
    });

    neck.animate([
      {y: 758},
    ], {
      delay: 900,
      duration: 1000,
      easing: 'ease-in',
      fill: 'forwards',
    });

    await head.animate([
      {y: 685},
    ], {
      delay: 1200,
      duration: 1000,
      easing: 'ease-in',
      fill: 'forwards',
    }).finished;

    async function combine() {
      await leftArm.animate([
        {y: 753},
      ], {
        duration: 200,
        fill: 'forwards',
      }).finished;

      await rightArm.animate([
        {y: 753},
      ], {
        duration: 200,
        fill: 'forwards',
      }).finished;

      head.animate([
        {y: 695},
      ], {
        duration: 200,
        fill: 'forwards',
      });

      await neck.animate([
        {y: 768},
      ], {
        duration: 200,
        fill: 'forwards',
      }).finished;

      leftArm.animate([
        {y: 773},
      ], {
        duration: 200,
        fill: 'forwards',
      });

      rightArm.animate([
        {y: 773},
      ], {
        duration: 200,
        fill: 'forwards',
      });
    }

    async function stretch() {
      neck.animate([
        {y: 758},
      ], {
        delay: 100,
        duration: 200,
        easing: 'ease-in',
        fill: 'forwards',
      });

      await head.animate([
        {y: 685},
      ], {
        delay: 200,
        duration: 200,
        easing: 'ease-in',
        fill: 'forwards',
      }).finished;
    }

    await combine();
    window.head = head;
    [body, head].forEach((sprite) => {
      sprite.addEventListener('mouseenter', (evt) => {
        stretch();
      });
      sprite.addEventListener('mouseleave', (evt) => {
        combine();
      });
    });
  }());
  </script>
</body>
</html>